<template>
  <view class="shop_process_box">
    <view class="shop_detail_bg"></view>
    <u-navbar
        title="领食周边购霸王餐"
        placeholder
        titleStyle="color:#ffffff"
        :bgColor="scHeight>1 ? '#FEAD24' : 'transparent'"
    >
      <template #left>
        <view class="content" @click="okBack">
          <u-icon name="arrow-left" color="#FFFFFF" size="20"></u-icon>
        </view>
      </template>

      <!-- #ifdef APP-PLUS || H5 -->
      <!--<template #right>
        <view class="top_share_box" style="padding: 10rpx" @click="share" >
          <view class="tishi_box"><text class="tishi_text">分享奖8元</text><view class="sjx"></view></view>
          <u-icon class="share_icon" :name="currentIcon" size="26" color="#0CBB2F"></u-icon>
        </view>
      </template>-->
      <!-- #endif -->
    </u-navbar>
    <view class="shop_process_content">
      <scroll-view scroll-y="true">
        <!-- 店铺信息 -->
        <view class="shops_list" v-if="shop?.shop_name">
          <view class="shop_list_item">
            <view class="shop_info">
              <view class="shop_mingzi">
                <view class="shop_name">{{ shop?.shop_name }}</view>
                <view class="shop_addres">{{ shop.shop.address }}  |  距你{{ (shop.distance/1000).toFixed(3) }}km</view>
              </view>
            </view>
            <view style="position: relative">
              <image v-if="shop.shop?.logo" :src="shop.shop.logo" style="background-color: #F6F6F6;width: 130rpx;height: 130rpx;border-radius: 20rpx;margin-left: 20rpx;"></image>
              <image v-else
                     src="https://img.alicdn.com/imgextra/i3/3829152210/O1CN01gKAL671SCE3PjsESI_!!3829152210.png"
                     style="border-radius: 20rpx;width: 130rpx;height: 130rpx;"></image>
              <view class="pt_hot" v-if="shop.is_hot===1">
                <text class="pt_hot_text">品质</text>
              </view>
              <view class="pt_hot" v-if="shop.is_new_shop === 1 && shop.is_hot === 0">
                <text class="pt_hot_text">新店</text>
              </view>
            </view>
          </view>
          <view class="shop_list_info">
            <view class="shop_list_info_warp" style="position: relative">
              <!--气泡提示盒子-->
              <view v-if="newUser == '新用户' && isShowTipsBox" @click="isShowTipsBox = false" class="tips_box">
                <view class="tips_icons">
                  <image :src="BaseImgUrl + '/shop/shopdetail/sjx_top_icon.png'" mode="widthFix" style="width: 24rpx;height: 24rpx;"></image>
                </view>
                <view class="tips_text_box">
                  <view class="tips_text">
                    <view class="tips_text_title">首单实付满<text style="color: #fd7c22;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) }}</text>返<text style="color: #fd7c22;padding: 0 4rpx;">{{ userInfo.is_member === 0 ? twoFixed(activity_item.rebate_amount) : twoFixed(activity_item.member_rebate_amount)}}</text>后，再得</view>
                    <view v-if="userInfo.is_member === 0">
                      <text v-if="twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.rebate_amount) > 3"><text style="color: #fd7c22;padding: 0 4rpx;">3元</text>奖励加<text style="color: #fd7c22;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.rebate_amount) -3 }}</text>元无门槛红包</text>
                      <text v-else><text style="color: #fd7c22;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.rebate_amount) }}元</text>奖励</text>
                    </view>
                    <view v-if="userInfo.is_member === 1">
                      <text v-if="twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.member_rebate_amount) > 3"><text style="color: #fd7c22;padding: 0 4rpx;">3元</text>奖励加<text style="color: #fd7c22;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.member_rebate_amount) -3 }}元</text>无门槛红包</text>
                      <text v-else><text style="color: #fd7c22;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.member_rebate_amount) }}元</text>奖励</text>
                    </view>
                  </view>
                  <view class="tips_text_close"><u-icon name="close" color="#ffffff" size="18"></u-icon></view>
                </view>
              </view>
              <view v-if="userInfo.is_member === 0" style="display: flex;align-items: center;">
                <view class="shop_type">{{newUser == '新用户'? '新人全额返' : '返' }}</view>
                <view v-if="newUser == '新用户'" class="place_text">满{{ twoFixed(activity_item.minimum_amount) }}返{{ twoFixed(activity_item.minimum_amount) }}</view>
                <view v-if="newUser == '老用户'" class="place_text">满{{ twoFixed(activity_item.minimum_amount) }}返{{ twoFixed(activity_item.rebate_amount) }}</view>
              </view>
              <view v-if="userInfo.is_member === 1" style="display: flex;align-items: center;">
                <view class="shop_type">{{newUser == '新用户'? '新人全额返' : '返' }}</view>
                <view v-if="newUser == '新用户'" class="place_text">满{{ twoFixed(activity_item.minimum_amount) }}返{{ twoFixed(activity_item.minimum_amount) }}</view>
                <view v-if="newUser == '老用户'" class="place_text">满{{ twoFixed(activity_item.minimum_amount) }}返{{ twoFixed(activity_item.member_rebate_amount) }}</view>
              </view>
              <!--<view v-if="activity_item.comment_type === 1" class="shop_info_warp_type" style="">品鉴星级</view>-->
              <view v-if="activity_item.is_comment === 2" class="activityNum_evaluate" style="">无需评价</view>
              <view v-if="activity_item.comment_type === 3" class="shop_info_warp_type" style="">图文品鉴</view>
              <view v-if="activity_item.comment_type === 4" class="shop_info_warp_type" style="">文字品鉴</view>

            </view>
          </view>
          <view class="count_down_box">
            <view class="shop_list_info_text">请在</view>
            <!--提交订单号倒计时-->
            <view v-if="shop.check_status === 0" class="shop_count_down">
              <lszbg-uni-count-down
                  :timeItem="orderNoCountDown"
                  :is-day="false"
                  :is-hour="true"
                  :is-minute="true"
                  :timeStyle="{fontSize: 14,color: '#ffffff', background: '#FF7900'}">
              </lszbg-uni-count-down>
            </view>
            <!--提交凭证倒计时-->
            <view v-if="shop.check_status > 0" class="shop_count_down">
              <lszbg-uni-count-down
                  :timeItem="voucherCountDown"
                  :is-day="false"
                  :is-hour="true"
                  :is-minute="true"
                  :timeStyle="{fontSize: 14,color: '#ffffff', background: '#FF7900'}">
              </lszbg-uni-count-down>
            </view>
            <view v-if="shop.check_status === 0" class="shop_list_info_text">内点外卖并提交外卖订单号</view>
            <view v-if="shop.check_status > 0" class="shop_list_info_text">内提交外卖凭证</view>
          </view>

        </view>
        <!-- 订单流程 -->
        <view class="shop_process_wrap">
          <view class="shop_process_wrap_bg"><image :src="BaseImgUrl + '/shop/process/process_bg01.png'" style="width: 100%;height: 260rpx;"></image></view>
          <view class="shop_process_wrap_title"><image :src="BaseImgUrl + '/shop/process/process_title01.png'" mode="heightFix" style="width: 186rpx;height: 40rpx;"></image></view>
          <view class="shop_process_wrap_content">
            <view class="process_wrap_top">
              <view class="process_wrap_top_img">
                <image v-if="shop?.shop.type === 1" :src="BaseImgUrl + '/shop/process/process_meituan.png'" mode="widthFix" style="width: 68rpx;height: 68rpx"></image>
                <image v-if="shop?.shop.type === 2" :src="BaseImgUrl + '/shop/process/process_elm.png'" mode="widthFix" style="width: 68rpx;height: 68rpx"></image>
                <image v-if="shop?.shop.type === 3" :src="BaseImgUrl + '/shop/process/process_jd.png'" mode="widthFix" style="width: 68rpx;height: 68rpx"></image>
              </view>
              <view class="process_wrap_line " :class="orderNoVal ? 'process_wrap_line_active' : ''"></view>
              <view class="process_wrap_top_img">
                <image :src="BaseImgUrl + '/shop/process/process_lingshi.png'" mode="widthFix" style="width: 68rpx;height: 68rpx"></image>
              </view>
              <view class="process_wrap_line"></view>
              <view class="process_wrap_top_img">
                <image :src="BaseImgUrl + '/shop/process/process_money.png'" mode="widthFix" style="width: 68rpx;height: 68rpx"></image>
              </view>
            </view>
            <view class="process_wrap_bottom">
              <view class="shop_process_wrap_content_item item_left">
                <view class="shop_process_wrap_content_item_title">{{ shop?.shop.type == 1 ? '美团点外卖' : shop?.shop.type == 2 ? '饿了么点外卖' : '京东点外卖' }}</view>
                <view class="shop_process_wrap_content_item_text">回领食填单号</view>
              </view>
              <view class="shop_process_wrap_content_item item_center">
                <view class="shop_process_wrap_content_item_title">收到外卖后</view>
                <view class="shop_process_wrap_content_item_text">上传完成截图</view>
              </view>
              <view class="shop_process_wrap_content_item item_right">
                <view class="shop_process_wrap_content_item_title">返现到账</view>
                <view class="shop_process_wrap_content_item_text">微信秒打款</view>
              </view>
            </view>
          </view>
        </view>
        <!--首单返利提示-->
        <view v-if="newUser == '新用户'" class="shop_first_tip">
          <view class="shop_process_tip_content">
            <view class="shop_first_img">
              <image :src="BaseImgUrl + '/order/red_icon01.png'" style="width: 32rpx;height: 36rpx;padding-right: 10rpx;"></image>
              <image :src="BaseImgUrl + '/order/free_icon.png'" style="width: 100rpx;height: 34rpx;padding-right: 10rpx;"></image>
            </view>
            <view class="shop_first_text_box">
              <text class="tips_text_title">首单实付满<text style="color: #F83123;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) }}</text>返<text style="color: #F83123;padding: 0 4rpx;">{{ userInfo.is_member === 0 ? twoFixed(activity_item.rebate_amount) : twoFixed(activity_item.member_rebate_amount) }}</text>后，再得</text>
              <text v-if="userInfo.is_member === 0">
                <text v-if="twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.rebate_amount) > 3"><text style="color: #F83123;padding: 0 4rpx;">3元</text>奖励加<text style="color: #F83123;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.rebate_amount) -3 }}</text>元无门槛红包</text>
                <text v-else><text style="color: #F83123;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.rebate_amount) }}元</text>奖励</text>
              </text>
              <text v-if="userInfo.is_member === 1">
                <text v-if="twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.member_rebate_amount) > 3"><text style="color: #F83123;padding: 0 4rpx;">3元</text>奖励加<text style="color: #F83123;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.member_rebate_amount) -3 }}元</text>无门槛红包</text>
                <text v-else><text style="color: #F83123;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.member_rebate_amount) }}元</text>奖励</text>
              </text>
            </view>
          </view>
        </view>
        <!--下单步数-->
        <view v-if="!isProcessTip" class="shop_process_num">
          <!--<view class="shop_process_num_left">
            <view class="shop_process_num_left_line"><u-line direction="col" color="#D3D3D3" :dashed="true"></u-line></view>
          </view>-->
          <shop_process_num
              :shop="shop"
              :signUp="signUp"
              :isUpdataBtn="isUpdataBtn"
              :isShowOrderNo="isShowOrderNo"
              :orderNoVal="orderNoVal"
              :userInfo="userInfo"
              :newUser="newUser"
              @ShowOrderNo="ShowOrderNo"
              @orderChange="orderChange"
          >
          </shop_process_num>
        </view>

        <!--订单号校验-->
        <view v-if="isProcessTip" class="shop_process_orderNo">
          <!--活动提示-->
          <view class="shop_process_tip">
            <view class="shop_process_tip_content">
              <image :src="BaseImgUrl + '/shop/process/process_icon04.png'"  style="width: 44rpx;height: 44rpx;padding-right: 10rpx;"></image>
              <view class="tip_text">
                <view v-if="activity_item?.is_comment === 2" class="tip_text_scroll">
                  <text style="white-space: nowrap">本活动</text>
                  <text style="color: #FF7900;white-space: nowrap">无需评价</text>
                  <text style="white-space: nowrap">，提交订单审核即可，禁止评价否则无法获得返利。</text>
                </view>
                <view v-else class="tip_text_scroll">
                  <text style="white-space: nowrap">本活动需要上传</text>
                  <text style="color: #FF7900;display: inline-block">{{ activity_item?.activity_ask }}</text>
                  <text style="white-space: nowrap">凭证，否则无法参与活动返利。</text>
                </view>
              </view>
              <!--<u-notice-bar :text="tipText" bgColor="#ffffff"></u-notice-bar>-->
            </view>
          </view>

          <!--MP、H5-->
          <!--#ifdef MP || H5-->
          <shop_process_order-no
              :shop="shop"
              :isShowTakeoutBtn="isShowTakeoutBtn"
              :orderNoVal="orderNoVal"
              :ShowScreenshot="ShowScreenshot"
              :ShowScreenshotBtn="ShowScreenshotBtn"
              @editorderNo="editorderNoFun"
              @orderChange="orderChange"
          ></shop_process_order-no>
          <!--#endif-->
          <!--APP-PLUS -->
          <!--#ifdef APP-PLUS-->
          <shop_process_apporder-no
              :shop="shop"
              :isShowTakeoutBtn="isShowTakeoutBtn"
              :orderNoVal="orderNoVal"
              @editorderNo="editorderNoFun"
              @orderChange="orderChange"
          ></shop_process_apporder-no>
          <!--#endif-->
        </view>


      </scroll-view>

    </view>

    <!--提交订单号弹窗-->
    <u-popup :show="isShowOrderNo" mode="center" bgColor="transparent" :customStyle="{width: '85%'}">
      <view class="orderNo">
        <view class="orderNo_box">
          <view class="orderNo_box_title">
            <text>仅差一步，即可</text>
            <text style="color: #FF7A01">获得奖励</text>
          </view>
          <view class="orderNo_content">
            <view class="orderNo_content_warp">
              <view class="orderNo_item">
                <image :src="BaseImgUrl + '/shop/process/process_icon01.png'" mode="widthFix" style="width: 88rpx;"></image>
                <view class="orderNo_item_title">用餐前拍照</view>
                <view class="orderNo_item_text">拍好再吃</view>
              </view>
              <view class="orderNo_line_img"><image :src="BaseImgUrl + '/shop/shop_detail_icon10.png'" mode="widthFix" style="width: 44rpx;"></image></view>
              <view v-if="activity_item?.is_comment != 2" class="orderNo_item">
                <image :src="BaseImgUrl + '/shop/process/process_icon02.png'" mode="widthFix" style="width: 88rpx;"></image>
                <view class="orderNo_item_title">提交用餐反馈</view>
                <view class="orderNo_item_text">含字含图</view>
              </view>
              <view v-if="activity_item?.is_comment != 2" class="orderNo_line_img"><image :src="BaseImgUrl + '/shop/shop_detail_icon10.png'" mode="widthFix" style="width: 44rpx;"></image></view>
              <view class="orderNo_item">
                <image :src="BaseImgUrl + '/shop/process/process_icon03.png'" mode="widthFix" style="width: 88rpx;"></image>
                <view class="orderNo_item_title">返回领食</view>
                <view class="orderNo_item_text">提交用餐凭证</view>
              </view>
            </view>
            <view class="orderNo_content_text">
              <text>超过</text>
              <text style="color: #FE7B20">明日11点</text>
              <text>将</text>
              <text style="color: #FE7B20">无法返利</text>
            </view>
          </view>
          <view @click="orderClick(shop)" class="orderNo_box_btn">我知道了</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import {ref} from "vue";
import { onLoad, onPageScroll, onShow} from "@dcloudio/uni-app";
import {conUtils} from "../utils/conUtils";
import {useCommonInfoStore} from "../stores/modules/commonInfo";
import {orderDetailsAPI, uploadOrderIdAPI} from "../services/order";
import {BaseImgUrl} from "../utils/lshttp";
const commonInfoStore = useCommonInfoStore()
import {useOrder} from "../pages/order/use_order";
import Shop_process_num from "./components/shop_process_num.vue";
import Shop_process_orderNo from "./components/shop_process_orderNo.vue";
import Shop_process_apporderNo from "./components/shop_process_apporderNo.vue";
import LszbgUniCountDown from "../components/LszbgUniCountDown.vue";
import {useUserInfoStore} from "../stores/modules/userInfo";
const userInfoStore = useUserInfoStore()
// const { handleSaveUserPayOrderNo } = useOrder()
const userInfo = userInfoStore.userInfo
const { twoFixed } = useCommonInfoStore() // 使用commonInfoStore状态管理器
const newUser = ref() // 是否是新用户
const applet = ref(0)
const shop = ref() // 店铺信息
const activity_item = ref() // 当前活动信息
const orderID = ref(0) // 店铺ID
const signUp = ref() // 只报名1, 领红包报名2, 进入店铺3
const orderNoVal = ref() // 订单号
const isUpdataBtn = ref(false) // 是否更新按钮

const ShowScreenshot = ref(false)// 前往人工上传截图
const ShowScreenshotBtn = ref(false) // 提交凭证，获得返利按钮显示
const orderNoCountDown = ref()// 提交订单号倒计时时间
const voucherCountDown = ref()// 提交凭证倒计时时间
// 提示内容
const tipText = ref()
// 定义订单检测返回值变量
const backDatas = ref()
const address = ref() // 获取地址信息
const isShowTipsBox = ref(false) // 首单提示是否显示


onLoad(async (options) => {
  console.log("ShopDetail = ", options)
  if (userInfoStore.isNewUser){
    newUser.value = "新用户"
    isShowTipsBox.value = true
  }else {
    newUser.value = "老用户"
    isShowTipsBox.value = false
  }
  console.log("newUser = ", newUser.value)
  // 店铺ID
  orderID.value = options.orderId
  // 订单提示是否显示isProcessTip
  isProcessTip.value = options.isProcessTip
  // 前往人工上传截图
  ShowScreenshot.value = options.ShowScreenshot
  // 只报名1, 领红包报名2
  if (options.signUp){
    signUp.value = Number(options.signUp)
  }
  // 订单提示是否显示
  if (options.isProcessTip){
    isProcessTip.value = true
  }
  // 是否显示上传凭证内容
  if (options.isShowScreenshot){
    ShowScreenshot.value = true
  }
  // 提交凭证，获得返利按钮显示
  if (options.ShowScreenshotBtn){
    ShowScreenshotBtn.value = true
  }

})
onShow(async () => {
  address.value = commonInfoStore.address
  console.log("addressDel = ", address)
  // 获取店铺信息事件
  await getShopInfo()

})

// 获取店铺信息事件
const getShopInfo = async () => {
  const res = await orderDetailsAPI(orderID.value, address?.value.latitude, address?.value.longitude)
  console.log("订单详情 = ", res)
  shop.value = res.result
  activity_item.value = shop.value.activity
  if (res.result.check_status > 0){
    voucherCountDown.value = res.result.end_time
  }
  if (res.result.check_status === 0){
    orderNoCountDown.value = res.result.end_time
  }
  // console.log('voucherCountDown=', voucherCountDown.value,'orderNoCountDown=', orderNoCountDown.value)
  // 如果存在订单号，则赋值订单号
  orderNoVal.value = res.result.submit_order_no ? res.result.submit_order_no : ''
  if (activity_item.is_comment === 2){
    tipText.value = "本活动无需评价，提交订单审核即可，禁止评价否则无法获得返利。"
  } else {
    tipText.value = "本活动需要上传"+ activity_item.value.activity_ask +"凭证，否则无法参与活动返利。"
  }
}

// 提交订单号事件
const ShowOrderNo = (item) => {
  // #ifdef MP || H5
  isShowOrderNo.value = item.isShowOrderNo
  // #endif
  orderNoVal.value = item.orderNoVal
  /* APP提交订单号 */
  // #ifdef APP-PLUS
  // 隐藏下单步数，显示已提交订单号
  isProcessTip.value = true
  // 显示订单号弹窗
  isShowOrderNo.value = item.isShowOrderNo
  // 显示外卖收到按钮
  isShowTakeoutBtn.value = true
  console.log("提交订单号", orderNoVal.value)
  // #endif
}
// 输入框的值改变事件
const orderChange = (item) => {
  // console.log("orderChange = ", item)
  orderNoVal.value = item.orderNoVal
}
// 修改订单号事件
const editorderNoFun = (item) => {
  // 隐藏订单号校验，显示下单步骤
  isProcessTip.value = item.isProcessTip
  // 赋值订单号
  orderNoVal.value = item.orderNoVal
  // 提交按钮为true
  isUpdataBtn.value = true
}
// 订单号输入框聚焦事件
const orderFocus = (res) => {
  console.log("orderFocus=", res.scHeight)
  scHeight.value = res.scHeight
}
// 订单号输入框失去焦点事件
const orderBlur = (res) => {
  console.log("orderBlur = ", res)
  scHeight.value = res
}



//倒计时计算
const findcountdownThere = (item) => {
  conUtils("findcountdownThere")
  let nowTime = +new Date()
  let putTime = +new Date(item.end_time.replace(/-/g, "/"))
  /* if (item?.isLocalControl) {
    putTime = getNewTimeV2(10)
  } */
  return (putTime - nowTime)
}

const scHeight = ref(0)
onPageScroll((e) => {
  scHeight.value = e.scrollTop
  // console.log('滚动距离==', e.scrollTop)
})
// 返回上个页面
const okBack = () => {
  // uni.navigateBack()
  if (applet.value === 0) {
    uni.reLaunch({url: '/pages/order/order'});
  } else {
    uni.reLaunch({url: '/pages/order/order'});
    // uni.reLaunch({url: '/pages/index/index?parent_id=' + parent_id.value});
  }
}

// 订单提示是否显示
const isProcessTip = ref(false)
// 订单提示外卖收到按钮
const isShowTakeoutBtn = ref(false)
// 提交订单号弹窗
const isShowOrderNo = ref(false)
const orderClick = (item) => {
  // 隐藏提交订单号弹窗
  isShowOrderNo.value = false
  // 隐藏下单步数，显示已提交订单号
  isProcessTip.value = true
  // 显示外卖收到按钮
  isShowTakeoutBtn.value = true
  item.user_pay_order_no = orderNoVal.value
  // 重新获取最新订单信息
  getShopInfo()
  // 提交订单号
  // handleSaveUserPayOrderNo(item)
}
// 保存订单号
const handleSaveUserPayOrderNo = async (item) => {
  let reg = /^[0-9]*$/
  if (!item.user_pay_order_no) {
    await uni.showToast({
      title: '请先添加外卖订单号再操作',
      icon: 'none',
    })
    return
  } else {
    if (item.user_pay_order_no.indexOf(' ') !== -1) {
      item.user_pay_order_no = item.user_pay_order_no.replace(/\s*/g, '')
    } else {
      if (!reg.test(item.user_pay_order_no)) {
        await uni.showToast({
          title: '输入纯数字订单号',
          icon: 'none',
        })
        return
      }
      if (item.user_pay_order_no.length !== 18 && item.user_pay_order_no.length !== 19) {
        // await uni.showToast({
        //     title: '请输入18位或者19位订单号',
        //     icon: 'none'
        // })
        // return
      }
    }
  }
  const res = await uploadOrderIdAPI(item.id, item.user_pay_order_no)
  await uni.showToast({
    title: "提示："+res.msg,
    icon: 'none',
    duration: 3000
  });
}
// 组件卸载前跳转订单页面，避免重复返回店铺详情后自动跳转到当前页面
/* onBeforeUnmount(() => {
  console.log("页面销毁前==跳转订单页面==")
  uni.reLaunch({url: '/pages/order/order'});
}) */


</script>


<style lang="scss">
page{
  width: 100%;
  height: 100%;
  background-color: #F4F4F4;
}
.shop_process_box{
  position: relative;
  width: 100%;
  height: 100%;
  .shop_process_content{
    position: relative;
    z-index: 10;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
  }
}
.shop_detail_bg{
  height: 650rpx;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background:linear-gradient( 180deg, #FEAD24 0%, rgba(253,124,30,0) 100%);
}
/* 店铺信息 */
.shops_list {
  width: 93%;
  margin: 20rpx auto;
  background-color: #ffffff;
  border-radius: 20rpx;
  z-index: 9;
  position: relative;
  padding-bottom: 2rpx;
  .shifupeisong {
    padding: 30rpx;
    border-top: 1px solid #EEEEEE;
    color: #666;
    font-size: 24rpx;

    .icons_box {
      display: flex;
      justify-content: space-between;

      view {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .copy_icon {
        &:before {
          content: '';
          display: inline-block;
          width: 44rpx;
          height: 44rpx;
          background: url('https://lsz.lszbg.com/imgs/old/copy_icon.png') no-repeat center center / 100% 100%;
          margin-right: 5rpx;
        }
      }

      .ps_icon {
        &:before {
          content: '';
          display: inline-block;
          width: 36rpx;
          height: 36rpx;
          background: url('https://lsz.lszbg.com/imgs/old/ps_icon.png') no-repeat center center / 100% 100%;
          margin-right: 10rpx;
        }
      }

      .sb_icon {
        &:before {
          content: '';
          display: inline-block;
          width: 36rpx;
          height: 36rpx;
          background: url('https://lsz.lszbg.com/imgs/old/sb_icon.png') no-repeat center center / 100% 100%;
          margin-right: 10rpx;
        }
      }

      .sb_icon {
        &:before {
          content: '';
          display: inline-block;
          height: 30rpx;
          position: relative;
          top: -5rpx;
        }
      }
    }
  }

  .pijiangonggao {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-top: 1px solid #EEEEEE;

    image {
      width: 45rpx;
      margin-right: 15rpx;
    }

    view {
      color: #999;
    }
  }

  .shop_dizhi {
    display: flex;
    align-items: flex-start;
    padding: 30rpx;
    border-top: 1px solid #EEEEEE;

    image {
      width: 56rpx;
      margin-right: 15rpx;
    }

    view {
      color: #999;
    }
  }

  .manjian_box {
    display: flex;
    align-items: center;
    padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 10rpx) 30rpx;
    border-top: 1px solid #EEEEEE;
    font-size: 24rpx;

    .man_tag {
      background-color: #F97632;
      border-radius: 10rpx;
      font-size: 24rpx;
      color: #ffffff;
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
    }

    view {
      margin-right: 20rpx;
    }

    text {
      color: #FF6433;
    }
  }

  .shop_list_item {
    background-color: #ffffff;
    border-radius: 20rpx 20rpx 0 0;
    padding: 20rpx 20rpx 0;
    display: flex;
    align-items: flex-start;

    .shop_info {
      flex: 1;
      padding-left: 20rpx;
      .shop_name {
        line-height: 44rpx;
        font-size: 32rpx;
        color: #333333;
        padding: 10rpx 0;
        font-weight: bold;
        flex: 1;
      }
      .shop_addres{
        font-size: 24rpx;
        color: #888888;
        line-height: 32rpx;
      }
      .adress_shop {
        display: flex;
        margin-top: 20rpx;

        .place_text {
          font-size: 26rpx;
          color: #888;
          flex: 1;
          margin-left: 10rpx;
          line-height: 44rpx;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* 这里是超出几行省略 */
          overflow: hidden;
        }

        .shop_type {
          display: inline-block;
          background-color: #FECC32;
          color: #333333;
          border-radius: 8rpx;
          font-size: 24rpx;
          text-align: center;
          padding: 2rpx 10rpx;
          position: relative;
          top: 4rpx;
          height: 36rpx;
        }

        .shop_type3 {
          background-color: #db2727;
          color: #FFFFFF;
          border-radius: 8rpx;
          font-size: 24rpx;
          text-align: center;
          padding: 0 6rpx;
          height: 36rpx;
          line-height: 36rpx;
        }

        .elemtag {
          background-color: #17aeff;
          color: #ffffff;
          border-radius: 8rpx;
          font-size: 24rpx;
          text-align: center;
          padding: 2rpx 10rpx;
          position: relative;
          top: 4rpx;
          height: 36rpx;
        }
      }


      .yysjandejuli_box {
        display: flex;
        align-items: center;
        margin: 24rpx 0 0 0;
        font-size: 24rpx;

        .yysj_text {
          background-color: #f1f1f1;
          border-radius: 8rpx;
          padding: 10rpx 6rpx;
          font-size: 20rpx;
          text-align: center;
        }

        .shop_juli {
          color: #555555;
          padding-left: 20rpx;
          font-size: 24rpx;
        }
      }

      .shop_yuliang {
        display: flex;
        align-items: center;

        .jindutiao {
          flex: 1;
        }

        .shengyu {
          padding-left: 20rpx;
          color: #FF6433;
          font-size: 24rpx;
        }
      }
    }
  }

  .shop_list_info{
    padding: 0 30rpx;
    .shop_mingzi {
      margin-bottom: 20rpx;

      .shop_addres{
        font-size: 24rpx;
        color: #888888;
        line-height: 32rpx;
        text-align: left;
      }
    }
    .shop_list_info_warp{
      height: 60rpx;
      display: flex;
      align-items: center;
      .shop_info_warp_type{
        padding: 0 10rpx;
        height: 36rpx;
        line-height: 36rpx;
        font-size: 22rpx;
        color: #FF4444;
        border: 2rpx solid #FF4444;
        border-radius: 6rpx;
        text-align: center;
        margin-left: 10rpx;
      }
      .activityNum_evaluate{
        height: 36rpx;
        line-height: 36rpx;
        font-size: 22rpx;
        color: #2DB327;
        text-align: center;
        padding: 0 10rpx;
        background: #F5FFF5;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 2rpx solid #74D87F;
        margin-left: 10rpx;
      }
      .shop_type{
        background: #FD7C22;
        color: #FFFFFF;
        font-size: 24rpx;
        // width: 50rpx;
        padding: 0 10rpx;
        height: 40rpx;
        text-align: center;
        line-height: 40rpx;
        border-radius: 6rpx 0 0 6rpx;
      }
      .place_text{
        width: 120rpx;
        height: 36rpx;
        line-height: 36rpx;
        border: 2rpx solid #FD7C22;
        border-radius: 0 6rpx 6rpx 0;
        color: #FD7C22;
        font-size: 22rpx;
        text-align: center;
      }
      /* 气泡提示盒子css */
      .tips_box{
        width: 320rpx;
        position: absolute;
        top: 60rpx;
        left: 0;
        .tips_icons{
          position: absolute;
          left: 14rpx;
          top: -26rpx;
          opacity: 1;
        }
        .tips_text_box{
          padding: 10rpx 20rpx 10rpx 10rpx;
          background-color: rgba(0,0,0,1);
          color: #fff;
          font-size: 22rpx;
          border-radius: 18rpx;
          position: relative;
          .tips_text_title{
            line-height: 34rpx;
          }
          .tips_text_close{
            position: absolute;
            right: 2rpx;
            top: 2rpx;
          }
        }
      }
    }
  }
  /* 倒计时box */
  .count_down_box{
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 30rpx;
    margin: 0 6rpx 4rpx;
    background: #FFF4E6;
    border-radius: 0 0 20rpx 20rpx;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #666666;
    & .shop_count_down{
      padding: 6rpx 10rpx 0;
      & .uni-countdown{
        display: inline;
        & .uni-countdown__number{
          padding: 4rpx 6rpx 0;
        }
      }
    }
  }
}

/* 下单流程css */
.shop_process_wrap{
  width: 93%;
  height: 260rpx;
  margin: 0 auto;
  border-radius: 20rpx;
  position: relative;
  .shop_process_wrap_bg{
    width: 100%;
    height: 260rpx;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    overflow: hidden;
  }
  .shop_process_wrap_title{
    height: 40rpx;
    padding: 20rpx 30rpx;
  }
  .shop_process_wrap_content{
    padding: 0 30rpx 20rpx;
    .process_wrap_top{
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      .process_wrap_top_img{
        width: 80rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .process_wrap_line{
        width: calc(50% - 105rpx);
        height: 12rpx;
        background: #E5E5E5;
      }
      .process_wrap_line_active{
        background: #FCB141;
      }
    }
    .process_wrap_bottom{
      display: flex;
      .shop_process_wrap_content_item{
        width: calc(100% / 3);
        .shop_process_wrap_content_item_title{
          font-size: 24rpx;
          color: #333333;
        }
        .shop_process_wrap_content_item_text{
          font-size: 22rpx;
          color: #666666;
        }
      }
      .item_left{
        text-align: left;
      }
      .item_right{
        text-align: right;
      }
      .item_center{
        text-align: center;
      }
    }
  }
}
/* 下单步数 */
.shop_process_num{
  width: 93%;
  height: 570rpx;
  margin: 20rpx auto;
  border-radius: 20rpx;
  background: #FFFFFF;
  display: flex;
  .shop_process_num_left{
    width: 36rpx;
    padding: 30rpx;
    position: relative;
    .shop_process_num_left_line{
      width: 2rpx;
      height: 80%;
      padding-left: 20rpx;
    }
    .shop_process_num_left_content{

      .shop_process_num_left_content_item{
        width: 36rpx;
        height: 36rpx;
        line-height: 36rpx;
        text-align: center;
        font-size: 28rpx;
        position: absolute;
        left: 32rpx;
        z-index: 1;
        color: #FFFFFF;
        border-radius: 50%;
        background: #CDCDCD;
      }
      .line_top{
        top: 30rpx;
      }
      .line_bottom{
        bottom: 16%;
      }
      .line_center{
        top: 42%;
      }
      .shop_process_num_left_content_item_active{
        background: #FD7C22;
      }
    }
  }

}
/* 首单返利提示css */
.shop_first_tip{
  width: 93%;
  min-height: 64rpx;
  margin: 20rpx auto;
  border-radius: 16rpx;
  color: #666666;
  background: linear-gradient( 270deg, #FFFFFF 0%, #FFF1F1 100%);
  .shop_process_tip_content{
    display: flex;
    align-items: center;
    padding: 20rpx 8rpx;
    .shop_first_img{
      width: 160rpx;
    }
    .shop_first_text_box{
      flex: 1;
      color: #666666;
      font-size: 24rpx;
      border-radius: 10rpx;
      .tips_text_title{
        line-height: 34rpx;
      }
    }
  }
}
/* 提交订单号提示 */
.shop_process_tip{
  width: 93%;
  min-height: 64rpx;
  margin: 20rpx auto;
  border-radius: 16rpx;
  color: #666666;
  background: #FFFFFF;
  .shop_process_tip_content{
    /* min-height: 64rpx;
    line-height: 44rpx; */
    padding: 10rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    .tip_text{
      flex: 1;
      overflow: hidden;
      padding: 12rpx 0;
      line-height: 24rpx;
      .tip_text_scroll{
        white-space: nowrap;
        animation: scrollRightToLeft 10s linear infinite;
      }
    }

  }
  @keyframes scrollRightToLeft {
    from {
      transform: translateX(100%); /* 从右侧开始 */
    }
    to {
      transform: translateX(-100%); /* 向左侧滚动 */
    }
  }
}
/* 订单号校验css */
.shop_process_orderNo{

}

/* 外卖已收到按钮css */
.shop_process_takeout_btn{
  width: calc(100% - 60rpx);
  height: 80rpx;
  position: fixed;
  bottom: 0;
  z-index: 999;
  background: #FFFFFF;
  padding: 20rpx 30rpx env(safe-area-inset-bottom);
  box-shadow: 0 8rpx 20rpx 0 rgba(0,0,0,0.3);
  .shop_process_takeout_btn_text{
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    color: #FFFFFF;
    text-align: center;
    background: linear-gradient( 270deg, #FF8118 0%, #FF5429 100%);
    border-radius: 50rpx;
    margin-bottom: 20rpx;
  }
}


/* 提交订单号弹窗css */
.orderNo{
  height: 560rpx;
  background: rgba(255, 255, 255, 0.3);
  border: 2rpx solid rgba(255, 255, 255, 0.6);
  border-radius: 32rpx;
  padding: 12rpx;
  box-sizing: border-box;
  .orderNo_box{
    height: 534rpx;
    padding: 20rpx;
    box-sizing: border-box;
    background: linear-gradient( 184deg, #FFF1DA 0%, #FFFFFF 30%);
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    .orderNo_box_title{
      font-size: 32rpx;
      color: #333333;
      text-align: center;
      line-height: 50rpx;
      font-weight: bold;
      padding: 30rpx 0;
    }
    .orderNo_content{
      .orderNo_content_warp{
        background: #F7F7F7;
        border-radius: 18rpx;
        padding: 20rpx;
        display: flex;
        .orderNo_item{
          flex: 1;
          text-align: center;
          .orderNo_item_title{
            font-size: 24rpx;
            color: #3D3D3D;
            line-height: 50rpx;
            font-weight: bold;
          }
          .orderNo_item_text{
            font-size: 22rpx;
            color: #666666;
          }
        }
        .orderNo_line_img{
          width: 44rpx;
          height: 44rpx;
          margin-top: 30rpx;
        }
      }
      .orderNo_content_text{
        text-align: center;
        font-size: 26rpx;
        line-height: 36rpx;
        padding: 30rpx 0;
      }
    }
    .orderNo_box_btn{
      width: 90%;
      height: 72rpx;
      line-height: 72rpx;
      text-align: center;
      color: #FFFFFF;
      font-size: 28rpx;
      margin: 0 auto;
      background: linear-gradient( 270deg, #FF7900 0%, #FF7900 100%);
      border-radius: 200rpx 200rpx 200rpx 200rpx;
    }
  }
}
/* 倒计时css */
.time {
  @include flex;
  align-items: center;
  padding: 0 10rpx;
  &__custom {
    width: 22px;
    height: 22px;
    background-color: #FF7900;
    border-radius: 4px;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
    align-items: center;

    &__item {
      color: #fff;
      font-size: 12px;
      text-align: center;
    }
  }

  &__doc {
    color: #FF7900;
    padding: 0px 4px;
  }

  &__item {
    color: #606266;
    font-size: 15px;
    margin-right: 4px;
  }
}

/* shop_process_num 页面的css */

</style>
